* {
  padding: 0;
  margin: 0;
}

.singerpage {
  width: 690rem;
  margin: 0 auto;
}

.singerpage .title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 100rem;
}

.singerpage .title span {
  font-size: 30rem;
  color: #ffffff;
  font-weight: 900;
}

.singerpage .userinfo {
  position: relative;
  margin-top: 160rem;
  height: 280rem;
  background-color: #000;
  border-radius: 18rem;
  padding: 0 35rem;
  display: flex;
  flex-direction: column;
  justify-content: end;
  box-sizing: border-box;
}

.singerpage .userinfo .infot {
  display: flex;
  justify-content: start;
  align-items: center;
  position: absolute;
  left: 35rem;
  top: -45rem;
}

.singerpage .userinfo .infot img {
  width: 200rem;
  height: 200rem;
  border-radius: 200rem;
}

.singerpage .userinfo .infot span {
  margin-left: 20rem;
  font-size: 30rem;
  font-weight: bold;
  color: #fefefe;
}

.singerpage .userinfo .infob {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 35rem;
  font-size: 27rem;
}

.singerpage .userinfo .infob span {
  margin-right: 10rem;
  color: #6f6f6f;
}

.singerpage .userinfo .infob .num {
  color: #fefefe;
}

.singerpage .userinfo .infob .guanzhu {
  background-color: #f8e24a;
  padding: 20rem 45rem;
  border-radius: 90rem;
  display: flex;
  justify-content: end;
  align-items: center;
}

.singerpage .userinfo .infob .guanzhu span {
  color: #000;
}

.singerpage .navicat {
  display: flex;
  justify-content: space-between;
  border-bottom: 1rem solid  #6f6f6f;
  margin-top: 60rem;
}

.singerpage .navicat .router-link-active {
  text-decoration: none;
  color: #fff;
  border-bottom: 2rem solid #fff;
}

.singerpage .navicat a {
  display: block;
  width: 50%;
  text-align: center;
  height: 100rem;
  text-decoration: none;
  color: #6f6f6f;
  font-size: 35rem;
  font-weight: 500;
}
